<template>
  <div>
    <SideMenu></SideMenu>
    <el-container>
      <el-main>
        <el-row>
          <el-col :span="8" v-for="(item, index) in lessons" :key="item" :offset="index > 0 ? 2 : 2">
            <el-card :body-style="{ padding: '0px',marginLeft:'20px' }"
                     v-if="item.status.toString()== lessstatus" >
              <img :src="item.photo" class="image">
              <div style="padding: 14px;">
                <div>课程名：{{ item.lessonname }}</div>
                <br>
                <div>课程状态：{{ item.status }}</div>
                <div class="bottom clearfix">
                  <el-button  type="primary" class="button" @click="goAddHomework">发布作业</el-button>
                  <el-button  type="primary" class="button" @click="">批改作业</el-button>
                  <el-button  type="primary" class="button" @click="">学习报表</el-button>
                  <el-button  type="primary" @click="setChapButton(item.id,item.lessonname)"></el-button>
                  <el-button  type="primary" class="button" @click="goCheckHomework(item.id)">批改作业</el-button>
                  <el-button  type="primary" class="button" @click="goReportForm">学习报表</el-button>
                  <el-button  type="primary" @click="setChapButton(scope.row.couid)">设置章节</el-button>

                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

      </el-main>

    </el-container>
    <el-dialog title="章节设置" :visible.sync="setChapVisible" width="55%">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item
          v-for="(chap, index) in chapterlist"
          :key="index"
          :title="chap.chaptername"
          :name="chap.chapterid"
        >
          <el-card>
            <el-row>
              小节列表：
              <el-button
                size="mini"
                type="success"
                icon="el-icon-edit"
                class="addsecbutton"
                @click="addSecButton(chap.chaptername)"
              >
                <!-- //添加小节按钮 -->
                添加小节
              </el-button>
            </el-row>
            <el-row>
              <el-table :data="chap.seclist" border stripe>
                <!-- 小节列表（name url 删除操作） -->
                <el-table-column type="index"></el-table-column>
                <el-table-column label="小节名" prop="sessionname"></el-table-column>
                <el-table-column label="视频url" prop="url"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <!-- 删除小节 -->
                    <el-button
                      type="danger"
                      icon="el-icon-delete"
                      @click="deleteSec(scope.row,index)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
          </el-card>
        </el-collapse-item>
      </el-collapse>
      <span slot="footer" class="dialog-footer">
        <el-popover placement="top" width="160" v-model="popoverVisible">
          <el-input v-model="tempchapname" placeholder="请输入章节名"></el-input>
          <div style="text-align: right; margin: 0;margin-top: 15px;">
            <el-button size="mini" type="text" @click="popoverVisible = false">取消</el-button>
            <el-button type="primary" size="mini" @click="addChap()">确定</el-button>
          </div>
          <el-button type="success" slot="reference" class="a1">添加章节</el-button>
        </el-popover>
        <el-button @click="setChapVisible = false">取 消</el-button>
        <el-button type="primary" @click="setChap()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="添加小节" :visible.sync="addSecVisible" width="50%" @close="addSecClosed">
      <el-form :model="tempseclist" ref="addSecRef">
        <el-form-item label="小节名:" prop="secname">
          <el-input v-model="tempseclist.secname" placeholder="请输入小节名"></el-input>
        </el-form-item>
        <el-form-item label="视频:" prop="url">
          <el-input v-model="tempseclist.url" placeholder="请输入URL"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addSecVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSec()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
    import SideMenu from "../teacher/SideMenu";
    export default {
        name: "TeacherLesson",

        components: {SideMenu},
        data(){
            return {
                lessstatus:    window.sessionStorage.getItem('lessonstatus'),
                vis:true,
                input:'',
                loading: true,
                //添加章节按钮的popover文本框内容，用于添加章节
                tempchapname: "",
                //添加小节按钮按后的小节名与url
                tempseclist: {
                    secname: "",
                    url: ""
                },
                //用于向添加小节对话框传输章节数据
                nowchap: "",
                addSecVisible: false,
                setChapVisible: false,

                //课程参数
                status:"开课中",
                lessonname:"java课设",
                activeName: "1",
                lessons:[],
                //章节信息
                chapterlist:[
                    /*{
                      chaptername:"第一章",
                      chapterid:1,
                      seclist:[],
                    }*/
                ],
                x:0,
                k:0,
                Upsession:[]
            }
        },
        created () {
            this.getLesson()
        },
        methods:{
            getLesson() {
                console.log(window.sessionStorage.getItem('username'))
                var _this = this
                this.$axios.post('/teacherlessons', {
                    username: window.sessionStorage.getItem('username')

                }).then(resp => {

                    _this.lessons = resp.data
                    // console.log(1+_this.lessons.lessonname)
                    // console.log("this.lessons")
                    // console.log(this.lessons)
                    // console.log("this.lessons")

                })
            },
            goReportForm(){
                this.$router.replace('/reportform')
            },
            goCheckHomework(lessonid){
                window.sessionStorage.setItem('lessonid', lessonid)
                window.sessionStorage.setItem('freshneed', 1)
                window.sessionStorage.setItem('fail', 0)
                window.sessionStorage.setItem('pass', 0)
                window.sessionStorage.setItem('NoCommit', 0)
                window.sessionStorage.setItem('Commit', 0)
                // console.log("this.lessonid")
                // console.log(window.sessionStorage.getItem('lessonid'))
                // console.log("this.lessonid")
                this.$router.replace('/checkhomework')
            },
            goAddHomework(){
                this.$router.replace('/addhomework')
            },
            addChap() {
                var length = this.chapterlist.length;
                length = length + 1;

                console.log(length)
                this.chapterlist.push({
                    chaptername: this.tempchapname,
                    chapterid: length,
                    seclist: []
                });
                //console.log(this.ChapList)
                this.popoverVisible = false;
            },
            //添加小节功能
            addSec() {
                this.x=0;
                for (var i = 0; i < this.chapterlist.length; i++) {
                    if (this.chapterlist[i].chaptername == this.nowchap) {
                        this.chapterlist[i].seclist.push({
                            sessionname: this.tempseclist.secname,
                            url: this.tempseclist.url
                        });
                        this.x=i;
                    }
                }

                this.$axios.post('/setchaplist', {
                    chaptername:this.chapterlist[this.x].chaptername,
                    chapterid:this.chapterlist[this.x].chapterid,
                    sessionname:this.tempseclist.secname,
                    url: this.tempseclist.url,
                    lessonid:window.sessionStorage.getItem("couid"),
                    lessonname:window.sessionStorage.getItem("lessonname")
                }).then(resp => {
                    if(resp.data.code===400)
                    {
                        this.$message.success("成功添加小节");
                        this.addSecVisible = false;
                    }
                    else{
                        return this.$message.error("添加小节失败");
                    }
                })

                this.addSecVisible = false;
            },
            async setChapButton(couid,lessonname) {
                this.chapterlist.splice(0,this.chapterlist.length)
                this.setChapVisible = true;
                //console.log(couid)
                //console.log('sbsbsbs'+window.sessionStorage.getItem("lessonname"))
                window.sessionStorage.setItem("couid",couid)
                window.sessionStorage.setItem("lessonname",lessonname)
                console.log(couid)
                let res = await this.$axios.post("getchaplist", {
                    lessonid: window.sessionStorage.getItem("couid")
                });

                console.log(res.data);
                for(var i = 0;i<res.data.length;i++){
                    this.chapterlist.push( {
                        chaptername : '',
                        chapterid:0,
                        seclist:[{
                            sessionname:"",
                            url:''
                        }
                        ]
                    })
                    this.chapterlist[i].chaptername=res.data[i].chaptername;
                    console.log(this.chapterlist[i].chaptername)
                    this.chapterlist[i].chapterid=res.data[i].chapterid;
                    console.log(this.chapterlist[i].chapterid)
                    this.x=i
                    console.log('x'+this.x)
                    this.getchapsec(this.x)

                }

            },
            getchapsec(m) {
                console.log(this.chapterlist[this.x].chaptername)
                var _this = this
                this.$axios.post('/getchapsession', {
                    chaptername:_this.chapterlist[this.x].chaptername,
                    lessonid:window.sessionStorage.getItem("couid")
                }).then(resp => {
                    console.log(m)
                    _this.chapterlist[m].seclist=resp.data,
                        console.log( resp.data)



                })
            },

            //添加小节表单域重置
            addSecClosed() {
                //表单重置
                this.$refs.addSecRef.resetFields();
                //console.log(this.fileList2)
                //文件表重置
                this.fileList2.splice(0, this.fileList2.length);
                //console.log(this.fileList2)
            },
            //添加小节按钮 需传入其所对应章节的章节名，然后赋值给nowchap，供添加小节对话框使用
            addSecButton(chapname) {
                this.nowchap = chapname;
                this.addSecVisible = true;
            },
            //删除小节功能 需提供章节与小节名
            deleteSec(son, dad) {
                //小节名
                // console.log(son.secname)
                //章节序号
                //console.log(dad)
                this.$axios.post('/deletese', {
                    chaptername:this.chapterlist[dad].chaptername,
                    sessionname:son.sessionname,
                    lessonid:window.sessionStorage.getItem("couid"),

                }).then(resp => {
                    if(resp.data.code===400)
                    {
                        this.$message.success("成功删除小节");
                        this.addSecVisible = false;
                    }
                    else{
                        return this.$message.error("删除小节失败");
                    }
                })

                for (var i = 0; i < this.chapterlist[dad].seclist.length; i++) {
                    if (this.chapterlist[dad].seclist[i].sessionname == son.sessionname) {
                        //console.log("找到该小节了")
                        this.chapterlist[dad].seclist.splice(i, 1);
                        //console.log(this.ChapList)
                        return this.$message.success("删除小节成功");
                    }
                }
                return this.$$message.error("删除小节失败");
            },
            //交互//将新生成的章节表提交至后端存储功能
            async setChap() {
                /*console.log('upsession')
               this.k=0
                var _this=this
                for(var i =0;i<this.chapterlist.length;i++)
                {console.log(i)
                  for(var j=0;j<this.chapterlist[i].seclist.length;j++)
                  { console.log('upsession1')
                    this.Upsession.push({
                      chaptername:this.chapterlist[i].chaptername,
                      chapterid:this.chapterlist.chapterid,
                      sessionname:this.chapterlist[i].seclist[j].sessionname,
                      url:this.chapterlist[i].seclist[j].url,
                      lessonid:window.sessionStorage.getItem("couid"),
                      lessonname:window.sessionStorage.getItem("lessonname")
                    })
                    console.log(this.Upsession)

                  }

                }

                console.log('upsession2'+this.Upsession[0].chaptername)
                let res = await this.$axios.post("setchaplist", {
                 List:session2
                });
                console.log(res)
                if (res.data.code != 200) {
                  return this.$message.error("上传章节表失败！");
                }*/
                this.$message.success("完成");
                this.setChapVisible = false;
            }
        }



    }
</script>

<style scoped>

</style>
